<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link href="<%=basePath%>plugins/h_uiadmin_v2.3.4/css/H-ui.min.css" rel="stylesheet" type="text/css" />
<link href="<%=basePath%>plugins/h_uiadmin_v2.3.4/css/H-ui.admin.css" rel="stylesheet" type="text/css" />
<link href="<%=basePath%>plugins/h_uiadmin_v2.3.4/lib/Hui-iconfont/1.0.7/iconfont.css" rel="stylesheet" type="text/css" />
<!--[if IE 6]>
<script type="text/javascript" src="http://lib.h-ui.net/DD_belatedPNG_0.0.8a-min.js" ></script>
<script>DD_belatedPNG.fix('*');</script>
<![endif]-->
<title>客户管理</title>
</head>
<body>
<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 用户中心 <span class="c-gray en">&gt;</span> 客户管理 <a class="btn btn-success btn-refresh radius r mr-20" style="line-height:1.6em;margin-top:3px" href="javascript:void(0);"  onclick="refresh();" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i></a></nav>

<div class="pd-20">
 <form  id="queryForm" action="" method="post">
		<div class="text-c"> 
		用户名:<input type="text" class="input-text" style="width:200px" placeholder="输入用户名" id="userName" name="userName" value="">
		性别: <span class="select-box inline"><select class="select"  size="1" id="gender" name="gender" style="width:100px">
		      <option value="0" selected="selected">请选择</option>
		      <option value="1">男</option>
		      <option value="2">女</option>
		   </select></span>
	     户等级:<span class="select-box inline"><select class="select"  size="1" id="customerLevel" name="customerLevel" style="width:150px">
		      <option value="0" selected="selected">请选择</option>
		      <option value="1">金牌用户</option>
		      <option value="2">银牌用户</option>
		      <option value="3">铜牌用户</option>
		   </select></span>
			<button type="button" class="btn btn-success radius" id="queryBtn" name="queryBtn"><i class="Hui-iconfont">&#xe665;</i> 搜用户</button>
			</form>
</div>
	<div class="cl pd-5 bg-1 bk-gray mt-20"> <span class="l"><!-- <a href="javascript:;" onclick="datadel()" class="btn btn-danger radius"><i class="Hui-iconfont">&#xe6e2;</i> 批量删除</a> --> <a href="javascript:;" onclick="member_add('新增客户','<%=basePath%>custmgr/toadd','','640')" class="btn btn-primary radius"><i class="Hui-iconfont">&#xe600;</i> 添加用户</a></span> <span class="r">共有数据：<strong><span id="count"></span></strong> 条</span> </div>
	<div class="mt-20">
	<table id="resultTable" class="table table-border table-bordered table-bg table-hover  table-sort" width="100%">
		<thead>
			<tr class="text-c">
				<!-- <th width="25"><input type="checkbox" name="" value=""></th> -->
				<th width="80">ID</th>
				<th width="100">用户名</th>
				<th width="40">性别</th>
				<th width="90">手机</th>
				<th width="150">邮箱</th>
				<th width="">常用地址</th>
				<th width="">客户等级</th>
				<th width="">身份证号码</th>
				<th width="100">操作</th>
			</tr>
		</thead>
		<tbody>
		    <tr>
				<td colspan="9"></td> 
				   <%--  <td><a title="编辑" href="javascript:;" onclick="member_edit('编辑','member-add.html','${cl.id}','','510')" class="ml-5" style="text-decoration:none"><i class="Hui-iconfont">&#xe6df;</i></a></td>
			     --%>
			</tr>
			
		</tbody>
	</table>
	</div>
</div>
<script type="text/javascript" src="<%=basePath%>plugins/h_uiadmin_v2.3.4/lib/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript" src="<%=basePath%>plugins/h_uiadmin_v2.3.4/lib/layer/2.1/layer.js"></script>
<script type="text/javascript" src="<%=basePath%>plugins/h_uiadmin_v2.3.4/lib/laypage/1.2/laypage.js"></script> 

<script type="text/javascript" src="<%=basePath%>plugins/h_uiadmin_v2.3.4/lib/datatables/1.10.0/jquery.dataTables.min.js"></script> 
<script type="text/javascript" src="<%=basePath%>plugins/h_uiadmin_v2.3.4/js/H-ui.js"></script> 
<script type="text/javascript" src="<%=basePath%>plugins/h_uiadmin_v2.3.4/js/H-ui.admin.js"></script> 
<script type="text/javascript" src="<%=basePath%>common/js/cms.js"></script> 
<script type="text/javascript" src="<%=basePath%>common/js/dt.ext.js"></script>
<script type="text/javascript">
$(function(){
	
	var resultTable = null ;
	function search(){
		resultTable = $('#resultTable').dataTable({
			// "aaSorting": [[ 1, "ASC" ]],//默认第几个排序
			//"bStateSave": false,//状态保存
			//"aoColumnDefs": [
			//  {"bVisible": false, "aTargets": [ 3 ]},  //控制列的隐藏显示
			//  {"orderable":false,"aTargets":[0]}// 制定列不参与排序 
			//] ,
			//"bAutoWidth":true  ,  // 自动宽度
			"processing": true,                    //加载数据时显示正在加载信息  
	        //"bServerSide": true,                    //指定从服务器端获取数据  
	        "serverSide": true,
	        //"iDisplayLength": 9,					//每页显示10 条数据
	        "ajax": "<%=basePath%>custmgr/query"  ,
	        "columns": [
	                    { "data": "id" },
	                    { "data": "userName" },
	                    { "data": "gender" },
	                    { "data": "mobileNumber" },
	                    { "data": "email" },
	                    { "data": "address" },
	                    { "data": "customerLevel" },
	                    { "data": "idCard" }  ,
	                    { "data": null }  
	                  ] ,
	       "columnDefs": [ {
				    	   "targets": 2 ,
				    	   "data":null ,
				    	   render:function(a,b,c,d){
				    		   if(c.gender == 1)
				    			   return "男" ;
				    		   else if(c.gender== 2)
				    			   return "女" ;
				    		   else
				    			   return "x" ;
				    	       }
				          },{
					    	   "targets": 6 ,
					    	   "data":null ,
					    	   render:function(a,b,c,d){
					    		   if(c.customerLevel == 1)
					    			   return "金牌用户" ;
					    		   else if(c.gender== 2)
					    			   return "银牌用户" ;
					    		   else if(c.gender== 3)
					    			   return "铜牌用户" ;
					    		   else 
					    			   return "" ;
					    	       }
					      },
				          { "targets": 8,
	                        "data": null,
	                         render: function (a, b, c, d) {
	                    	  //console.log(a) ;
	                    	 // console.log(b) ;
	                    	 // console.log(c) ;
	                    	 // console.log(d) ;
	                          var html = ' <a title="编辑" href="javascript:void" onclick="member_edit("编辑", "44","","650")" class="ml-5" style="text-decoration:none"><i class="Hui-iconfont">&#xe6df;</i></a>';
	                          html  = html + "<button onClick='show();'>Click!</button>" ;
	                          return html;
	                      } ,
	                       "defaultContent": "<button>Click!</button>"
	                  } ]
	         // "sAjaxSource": "<%=basePath%>custmgr/query",    
	        // "fnServerData": retrieveData            //获取数据的处理函数  
	         
		});
	}
	
	$('#resultTable tbody').on( 'click', 'a', function () {
		//alert(resultTable) ;
       // var data = resultTable.row( $(this).parents('tr') ).data();
       // alert( data[0] +"'s salary is: "+ data[ 5 ] );
    } );
	
	function show(){
		alert(33)  ;
	}
	
	//自定义数据获取函数
	/* function retrieveData ( sSource ) {
		// var params = JSON.stringify( $("#queryForm").serializeJson()) ;
		 
		 $.ajax( {
			"type": "POST", 
			"url": sSource , 
			"contentType":"application/json;charset=UTF-8",   
			"dataType": "json",  // 预期服务器返回的数据类型
			"data": $("#queryForm").serialize() , //  //以json格式传递   
			"success": function(resp) {
				 fnCallback(resp) ;
			}
		}); 
		
		
	} */
	
	// ajax请求结果回调
	/* var fnCallback = function(res){
		 console.log(res) ;
		 if(res.success == true){
			 
			  $("#count").text(res.total) ;
			  var  data = res.data ;
			  for(var i=0;i<5;i++){
				  $('.table-sort').dataTable().fnAddData([
				                                         ".1",
				                                         ".2",
				                                         ".3",
				                                         ".4",".5",".6",".7",".8",".9",
				                                         "<a href='#' class='delurl'>删除</a>"]);
			  }
		 }
	} */
	
	  $('#queryBtn').click(function(){
		//alert($("#queryForm").serialize()) ;
		// $('.table-sort tbody tr').remove();
		// $('#resultTable').fnDraw() ;
		resultTable.fnReloadAjax("<%=basePath%>custmgr/query?"+$("#queryForm").serialize()) ;
		// search( $("#queryForm").serialize() ) ;
	});  
	
	 // init search 
	 search();
});



/*用户-添加*/
function member_add(title,url,w,h){
	layer_show(title,url,w,h);
	
	/* var index = layer.open({
		type: 2,
		title: title,
		content: url
	});
	layer.full(index); */
	
}
/*用户-查看*/
function member_show(title,url,id,w,h){
	layer_show(title,url,w,h);
}
/*用户-停用*/
function member_stop(obj,id){
	layer.confirm('确认要停用吗？',function(index){
		$(obj).parents("tr").find(".td-manage").prepend('<a style="text-decoration:none" onClick="member_start(this,id)" href="javascript:;" title="启用"><i class="Hui-iconfont">&#xe6e1;</i></a>');
		$(obj).parents("tr").find(".td-status").html('<span class="label label-defaunt radius">已停用</span>');
		$(obj).remove();
		layer.msg('已停用!',{icon: 5,time:1000});
	});
}

/*用户-启用*/
function member_start(obj,id){
	layer.confirm('确认要启用吗？',function(index){
		$(obj).parents("tr").find(".td-manage").prepend('<a style="text-decoration:none" onClick="member_stop(this,id)" href="javascript:;" title="停用"><i class="Hui-iconfont">&#xe631;</i></a>');
		$(obj).parents("tr").find(".td-status").html('<span class="label label-success radius">已启用</span>');
		$(obj).remove();
		layer.msg('已启用!',{icon: 6,time:1000});
	});
}
/*用户-编辑*/
function member_edit(title,id,w,h){
	 url = $.bastPath()+"custmgr/toEdit" ;
	 alert(url) ;
	 url = url + "?customerId="+id ;
	layer_show(title,url,w,h);
}
/*密码-修改*/
function change_password(title,url,id,w,h){
	layer_show(title,url,w,h);	
}
/*用户-删除*/
function member_del(obj,id){
	layer.confirm('确认要删除吗？',function(index){
		$(obj).parents("tr").remove();
		layer.msg('已删除!',{icon:1,time:1000});
	});
}
/**
 * 刷新
 */
function refresh(){
	 location.replace(location.href);
}
</script> 
</body>
</html>